<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
</div>

<div id="tableView">
    <el-row>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="标题:">
                <el-input v-model="searchForm.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="search" @click="searchClick">查询</el-button>
                <el-button type="success" icon="plus" @click="addClick">发布信息</el-button>
            </el-form-item>
        </el-form>

    </el-row>

    <!-- 列表 --> <!-- 列表 --> <!-- 列表 --> <!-- 列表 --> <!-- 列表 -->
    <el-row>
        <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange"
                  style="width: 100%">
            </el-table-column>
            <el-table-column prop="id" label="编号" width="105" align="center" sortable>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="400" align="center">
            </el-table-column>
            <el-table-column prop="name" label="发布类型" width="130" align="center">
            </el-table-column>
            <el-table-column prop="issuer" label="责任编辑" width="130" align="center">
            </el-table-column>
            <el-table-column
                    prop="release_time"
                    :formatter="formatDate"
                    label="发布时间"
                    width="150"
                    sortable
                    align="center">
            </el-table-column>
            <el-table-column :formatter="Tablestate" prop="state" label="审核状态" width="130" align="center" >

            </el-table-column>
            <el-table-column label="操作" align="center">
                <template scope="scope">
                    <el-button :plain="true" type="danger" size="small"  :disabled="scope.row.state != '0'"  icon="subChe" @click="SubClick(scope.row)" >
                        提交审核
                    </el-button>
                    <el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">
                        编辑
                    </el-button>
                    <el-button :plain="true" type="danger" size="small" icon="delete" @click="deleteClick(scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-row>

    <!--列表底部工具条和分页符-->
    <el-row style="margin-top: 20px" type="flex" justify="end">
        <el-col :span="18">
            <el-pagination style="float: right" @size-change="pageSizeChange" @current-change="currentPageChange"
                           :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </el-col>
    </el-row>

    <!--新增信息发布界面-->   <!--新增信息发布界面-->   <!--新增信息发布界面-->
    <el-dialog title="信息发布" :visible.sync="editFormVisible" :close-on-click-modal="false">
        <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
            <el-form-item label="标题" prop="title">
                <el-input v-model="editForm.title" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="信息类型"  >
                    <el-select v-model="editForm.type" placeholder="请选择">
                       <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id" >
                        </el-option>
                    </el-select>
            </el-form-item>

            <el-form-item label="责任编辑" prop="issuer">
                <el-input v-model="editForm.issuer" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="内容" prop="content">
                <el-input
                        type="textarea"
                        :rows="3"
                        placeholder="请输入内容"
                        v-model="editForm.content">
                </el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click.native="editFormVisible = false">取消</el-button>
            <el-button type="primary" @click.native="editSubmit" :loading="editLoading"  :disabled="editForm.state != '0'">提交</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '信息发布'
        }
    });
    var tableView = new Vue({
        el: '#tableView',
        data: {
            tableData: [],
            loading: false,

            options: [],
            value: '',


            searchForm: {
                id: '',
                title: '',

            },
            //多选值
            multipleSelection: [],
            //当前页
            currentPage: 1,
            //分页大小
            pageSize: 5,
            //总记录数
            total: 800,
            //删除的弹出框
            deleteVisible: false,
            //编辑界面是否显示
            editFormVisible: false,
            editLoading: false,
            goUrl: '',

            editFormRules: {
                title: [
                    {required: true, message: '请输入标题', trigger: 'blur'}
                ],
                type:[
                    {required: true, message: '请选择信息类型', trigger: 'blur'}
                ],
                issuer:[
                    {required: true, message: '请输入责任编辑', trigger: 'blur'}
                ],
                content:[
                    {required: true, message: '请输入内容', trigger: 'blur'}
                ]
            },
            //信息发布界面数据
            editForm: {
                id: 0,
                title: "",
                type:"",
                issuer: "",
                click_rate: "",
                value: "",
            },


            //将时间戳以时间格式显示
            formatDate(row, column) {
                let date = new Date(parseInt(row.release_time));
                let Y = date.getFullYear() + '-';
                let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
                let D = date.getDate() < 10 ? '0' + date.getDate() + '    ' : date.getDate() + '    ';
                let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
                let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + '' : date.getMinutes();
                //  let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
                return Y + M + D + h + m;
            },
        },
        methods: {
            Tablestate: function (row) {
                if (row.state == 0) {
                    return "未审核";
                } else if (row.state == 1) {
                    return "已提交";
                } else if (row.state == 2) {
                    return "审核通过";
                }else {
                    return "未通过";
                }

            },


            //表格重新加载数据
            loadingData: function () {
                var _self = this;
                _self.loading = true;
                //var self = this;
                var start = (this.currentPage - 1) * this.pageSize;
                var end = this.currentPage * this.pageSize + 1;
                var searchForm = {
                    'start': start,
                    'pageSize': this.pageSize,
                    'title': this.searchForm.title,
                    'name': this.searchForm.name,
                    'deptNo': this.searchForm.deptNo
                };

                axios.post('/news/selNews', searchForm).then(function (response) {
                    console.log(response.data);
                    //alert(response.data);
                    _self.total = response.data.total;
                    _self.tableData = response.data.data;
                    //_self.multipleSelection=response.data.data;
                })
                setTimeout(function () {
                    console.info("加载数据成功");
                    _self.loading = false;
                }, 300);
            },

            //查询
            searchClick:function() {
                var self = this;
                self.loadingData();//重新加载数据
            },

            //新建事件  //新建事件 //新建事件 //新建事件
            addClick: function () {
                //alert(111);
                this.goUrl = "/news/add";
                var _self = this;
                this.editForm = {title: "",type:"", content:"", issuer: "",state:0}
                this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                _self.loadingData();//重新加载数据
            },

            //保存点击事件 //保存点击事件//保存点击事件//保存点击事件
            editSubmit: function () {

                var _self = this;
                _self.loading = true;
                var formData = this.editForm;
                var goUrl = this.goUrl;
                if (formData.title=="" || formData.type=="" || formData.issuer=="" || formData.content=="") {
                    _self.$notify.error({
                        title: '错误',
                        message: '所有表格不能为空，请重新填写'
                    });
                    _self.loadingData();//重新加载数据
                }else {
                    axios.post(goUrl, formData).then(function (response) {

                        if (response.data > 0) {
                            _self.editFormVisible = false;// 让弹出层隐藏
                            _self.loadingData();//重新加载数据
                        }
                    })
                }

                console.info(this.editForm);
            },
            //表格删除事件
            deleteClick: function (row) {
                var _self = this;
                this.$confirm('删除后将无法恢复，请确认', '提示', {
                    type: 'warning'
                }).then(function () {
                    var url = "/news/del/" + row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if (response.data > 0) {
                            _self.$message({
                                message: row.id + '删除成功',
                                type: 'success'
                            });
                            _self.loadingData();//重新加载数据
                        }
                    });
                }).catch(function (e) {
                    if (e != "cancel")
                        console.log("出现错误：" + e);
                });
            },
            //表格编辑事件
            editClick: function (row) {
                this.goUrl = "/news/update";
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },
            //提交审核事件
            SubClick:function (row) {
                var _self =this;
                _self.a=true;
                this.$confirm('提交后将无法编辑，请确认','提示',{
                    type:'warning'
                }).then(function () {
                    var url="/news/sub/" + row.id;
                    axios.get(url).then(function (response) {
                        //alert(response.data);
                        if (response.data > 0) {
                            _self.$message({
                                message: row.id + '提交审核成功',
                                type: 'success',

                            });
                            _self.loadingData();//重新加载数据
                        }
                    });

                }).catch(function (e) {
                    if (e != "cancel")
                        console.log("提交审核出现错误：" + e);
                });
            },
            //表格勾选事件
            selectionChange:function(val) {
                for(var i=0;i<val.length;i++) {
                    var row = val[i];
                }
                this.multipleSelection = val;
                console.info(val);
            },

            //分页大小修改事件
            pageSizeChange:function(val) {
                this.pageSize = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            },
            //当前页修改事件
            currentPageChange:function(val) {
                this.currentPage = val;
                var _self = this;
                _self.loadingData();//重新加载数据
            }


        },
        //显示表格数据
        created: function () {
            //在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。
            var self = this;
            var start = (this.currentPage - 1) * this.pageSize;
            var end = this.currentPage * this.pageSize + 1;
            axios.post('/news/selNews', {'start': start, 'pageSize': this.pageSize}).then(function (response) {
                // console.log(response.data);
                //alert(response.data.total);
                self.total = response.data.total;
                self.tableData = response.data.data;
                self.options=response.data.options;
                // self.multipleSelection=response.data.data;
            })
        }

    })
</script>
</html>